<template>
  <el-form :inline="true" :model="formInline" class="form-inline">
    <el-row class="row">
      <el-form-item label="所属管廊：">
        <el-select v-model="formInline.pipeGallery" placeholder="--请选择--">
          <el-option
            v-for="item in pipe"
            :key="item.id"
            :label="item.pipeName"
            :value="item.pipeName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属仓室：">
        <el-select v-model="formInline.warehouse" placeholder="--请选择--">
          <el-option
            v-for="item in Warehouse"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-col :span="12" style="margin-top: -4px">
        <el-form-item label="防火分区：">
          <el-select
            v-model="formInline.fireCompartment"
            placeholder="--请选择--"
          >
            <el-option
              v-for="item in partition"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-form-item label="设备名称：">
        <el-input v-model="formInline.equipmentName" placeholder="--请输入--" />
      </el-form-item>
      <el-form-item label="权属单位：">
        <el-input v-model="formInline.ownershipUnit" placeholder="--请输入--" />
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="formInline.currentState" placeholder="--请选择--">
          <el-option
            v-for="item in Code"
            :key="item.code"
            :label="item.value"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" class="m-left" @click="onClear"
          >清空</el-button
        >
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive, defineEmits, ref, defineProps } from 'vue'
import {
  commonPipeNameDrop,
  commonwarehouseIdDrop,
  commonsubregionIdDrop
} from '@/api/back'
import { stateCode } from '@/api/equipment'

const formInline = reactive({
  pipeGallery: '',
  warehouse: '',
  fireCompartment: '',
  equipmentName: '',
  ownershipUnit: '',
  currentState: ''
})
const emits = defineEmits(['onSearch'])
const Code = ref()
const onSubmit = () => {
  emits('onSearch', formInline)
}

const state = () => {
  stateCode({
    code: '',
    type: 3
  }).then((res) => {
    Code.value = res
  })
}
state()
const onClear = () => {
  formInline.pipeGallery = ''
  formInline.warehouse = ''
  formInline.fireCompartment = ''
  formInline.equipmentName = ''
  formInline.ownershipUnit = ''
  formInline.currentState = ''
  emits('onSearch', formInline)
}
const pipe = ref()
const Warehouse = ref()
const partition = ref()

const list = async () => {
  pipe.value = await commonPipeNameDrop()
  Warehouse.value = await commonwarehouseIdDrop()
  partition.value = await commonsubregionIdDrop()
}
list()
</script>

<style lang="scss" scoped>
.form-inline {
  width: 100%;
  position: relative;
  display: flex;
  column-gap: 20px;
  padding-bottom: 15px;
  //
  .row {
    position: relative;
    width: 100%;
    .btns {
      position: absolute;
      right: 0;
      top: 0px;
    }
  }
}
:deep(.el-form-item) {
  margin-right: 20px !important;
}
:deep(.el-input__inner) {
  width: 247px;
  opacity: 1;
}
</style>
